<template>
  <div class="m-button">
    <Button
      v-bind="$attrs"
      v-on="$listeners"
      :style="{
        width: width + 'px',
        height: height + 'px',
        ...((type === 'filled' && filledStyle) ||
          (type === 'bordered' && borderedStyle) ||
          (type === 'grey' && greyStyle) ||
          (type === 'dark' && darkStyle) ||
          (type === 'light' && lightStyle) ||
          (type === 'borderedLight' && borderedLightStyle))
      }"
    >
      <slot />
    </Button>
  </div>
</template>

<script>
import { Button } from "element-ui"

export default {
  name: "MButton",
  components: { Button },
  props: {
    type: {
      type: String,
      default: "filled"
    },
    width: String,
    height: String
  },
  data() {
    return {
      filledStyle: {
        backgroundColor: "#E48B2C",
        border: "none",
        color: "#fff",
        borderRadius: "10px"
      },
      borderedStyle: {
        backgroundColor: "#F3F3F7",
        border: "solid 1px #E48B2C",
        color: "#E48B2C",
        borderRadius: "10px"
      },
      greyStyle: {
        backgroundColor: "#F3F4F7",
        border: "none",
        color: "#666",
        borderRadius: "10px"
      },
      darkStyle: {
        backgroundColor: "rgb(102,102,102)",
        border: "none",
        color: "#fff",
        borderRadius: "10px"
      },
      lightStyle: {
        backgroundColor: "#fff",
        border: "none",
        color: "#666",
        borderRadius: "10px"
      },
      borderedLightStyle: {
        backgroundColor: "#fff",
        border: "solid 1px rgb(214, 213, 213)",
        color: "#666",
        borderRadius: "10px"
      }
    };
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.m-button {
  /deep/ .el-button {
    display: flex;
    justify-content: center;
    align-items: center;
    &.is-disabled {
      background: #aaa !important;
    }
    &:not(.el-button--mini) {
      height: 45px;
    }

    &:hover {
      border-color: #eaeaea;
    }
  }
}
</style>
